<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			html, body{
				width: 100%;
				height: 100%;
			}
			.swiper-container{
				width: 100%;
				height: 100%;
				margin: 0 auto;
			}
			.swiper-wrapper div{
				position: relative;
			}
			.swiper-wrapper div:nth-child(1){
				background: url(img/bg1.jpg);
				background-size: 100% 100%;
			}
			.swiper-wrapper div:nth-child(2){
				background: url(img/bg2.jpg);
				background-size: 100% 100%;
			}
			.swiper-wrapper div:nth-child(3){
				background: url(img/bg3.jpg);
				background-size: 100% 100%;
			}
			.swiper-wrapper div:nth-child(4){
				background: url(img/bg4.jpg);
				background-size: 100% 90%;
			}
			.swiper-wrapper div:nth-child(5){
				background: url(img/bg5.png);
				background-size: 100% 100%;
			}
			
			.logo{
				position: absolute;
				top: 0;
				width: 100%;
			}
			.swiper-wrapper .swiper-slide img:nth-child(2){
				position: absolute;
			}
			#car1{
				left: 0;
				top: 70%;
				width: 80%;
			}
			#car2{
				right: 0;
				top: 70%;
				width: 60%;
			}
			#car3{
				top: 65%;
				left: 20px;
				width: 40%;
			}
			#car4{
				bottom: 0;
				width: 100%;
			}
			#car5{
				bottom: 50px;
				width: 50%;
				left: 25%;
			}
		</style>
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
	            <div class="swiper-slide">
	            	<img class="logo ani" src="img/logo.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
	            	<img id="car1" class="ani" src="img/car.png" swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1s'/>
	            </div>
	            <div class="swiper-slide">
	            	<img class="logo ani" src="img/logo.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
	            	<img id="car2" class="ani" src="img/car2.png"/ swiper-animate-effect='fadeInRight' swiper-animate-duration='1s' swiper-animate-delay='1s'>
	            </div>
	            <div class="swiper-slide">
	            	<img class="logo ani" src="img/logo.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
	            	<img id="car3" class="ani" src="img/fa.png"/ swiper-animate-effect='fadeInLeft' swiper-animate-duration='1s' swiper-animate-delay='1s'>
	            </div>
	            <div class="swiper-slide">
	            	<img class="logo ani" src="img/logo.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
	            	<img id="car4" class="ani" src="img/nei.jpg"/ swiper-animate-effect='fadeInUp' swiper-animate-duration='1s' swiper-animate-delay='1s'>
	            </div>
	            <div class="swiper-slide">
	            	<img class="logo ani" src="img/logo.png" swiper-animate-effect='fadeInDown' swiper-animate-duration='1s' swiper-animate-delay='0.2s'/>
	            	<img id="car5" class="ani" src="img/button.png"/ swiper-animate-effect='fadeIn' swiper-animate-duration='1s' swiper-animate-delay='1s'>
	            </div>
	        </div>
	        <div class="swiper-pagination"></div>
		</div>
	</body>
	
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.animate.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
//			autoplay: 2000,
			direction: 'horizontal',
			pagination: '.swiper-pagination',
			paginationClickable :true,
			
			onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
	    		swiperAnimateCache(swiper); //隐藏动画元素 
	    		swiperAnimate(swiper); //初始化完成开始动画
	  		}, 
	  		onSlideChangeEnd: function(swiper){ 
	    		swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	  		} 	
		});
	</script>
</html>